<template>
	<view :class="[primarySize()]">
		<view class="page-foot bg-white">
			<view class="ptb10 plr30 flex-box" v-if="model.id">
				<view class="del" @click="bindDelModule()" >删除</view>
				<view class="btn1 ml30 mini" @click="bindSubmit()">提交</view>
			</view>
			<view class="ptb10 plr30" v-else @click="bindSubmit()">
				<view class="btn1">提交</view>
			</view>
			
		</view>
		<view class="container">
			<view class="p30">
				<view class="fs30 col3 lh42">请选择求职类型</view>
				<view class="box1 mt30">
					<multi-select :items="types" @change="bindTypeChange" id_key="id" name_key="name" :value="model.job_type">
						<view class="flex-box item" style="border-top: none;">
							<view class="col3 fs30 flex-grow-1 pr20">工作性质</view>
							<view class="fs30" :class="[getListItemById(types,model.job_type)?'col3':'col9']">{{getListItemAttrById(types,model.job_type,'name','请选择')}}</view>
							<image src="@/static/public/arrow-r.png" mode="widthFix" class="ico10 mt5 ml10"></image>
						</view>
					</multi-select>
					<view class="flex-box item" @click="bindJobCategory()">
						<view class="col3 fs30 flex-grow-1 pr20">求职意向</view>
						<view class="fs30" :class="[!model.fav_category?'col9':'col3']">{{!model.fav_category?'请选择':model.fav_category.category_name}}</view>
						<image src="@/static/public/arrow-r.png" mode="widthFix" class="ico10 mt5 ml10"></image>
					</view>
				</view>
				<view class="fs30 col3 lh42 mt40">请选择具体偏好</view>
				<view class="box1">
					<multi-select :items="salaryOptions" @change="bindSalaryChange" id_key="id" name_key="name" :value="model.expect_salary_id">
						<view class="flex-box item" style="border-top: none;">
							<view class="col3 fs30 flex-grow-1 pr20">期望薪资</view>
							<view class="fs30" :class="[getListItemById(salaryOptions,model.expect_salary_id)?'col3':'col9']">{{getListItemAttrById(salaryOptions,model.expect_salary_id,'name','请选择')}}</view>
							<image src="@/static/public/arrow-r.png" mode="widthFix" class="ico10 mt5 ml10"></image>
						</view>
					</multi-select>
					<multi-select :items="industryCategories" @change="bindIndustryChange" id_key="id" name_key="name" :value="model.industry_category_id">
						<view class="flex-box item">
							<view class="col3 fs30 flex-grow-1 pr20">期望行业</view>
							<view class="fs30" :class="[getListItemById(industryCategories,model.industry_category_id)?'col3':'col9']">{{getListItemAttrById(industryCategories,model.industry_category_id,'name','请选择')}}</view>
							<image src="@/static/public/arrow-r.png" mode="widthFix" class="ico10 mt5 ml10"></image>
						</view>
					</multi-select>
					
					<multi-select :items="cities" @change="bindCityChange" id_key="id" max_level="2" name_key="name" :value="model.fav_city_id">
						<view class="flex-box item">
							<view class="col3 fs30 flex-grow-1 pr20">意向城市</view>
							<view class="fs30" :class="[favAreaName?'col3':'col9']">{{favAreaName?favAreaName:'请选择'}}</view>
							<image src="@/static/public/arrow-r.png" mode="widthFix" class="ico10 mt5 ml10"></image>
						</view>
					</multi-select>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import multiSelect from '@/components/multi-select/multi-select.vue';
	var validate = require("../../xilu/validate.js");
	export default {
		components:{
			multiSelect
		},
		data() {
			return {
				
				model:{},
				favAreaName: '',
				types: [{id:1,name:'全职'},{id:2,name:'兼职'}],
				salaryOptions: [],
				//workStates: [],
				industryCategories: [],
				cities: []
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onLoad() {
			
			this.getOpenerEventChannel().on('dataTransfer', data => {
			  this.model = Object.assign({},data.model); //创建一份浅拷贝, 不影响上一页的值
			  this.favAreaName = Object.keys(data.model).length>0 ? data.model.fav_province.name+','+data.model.fav_city.name : '';
			  this.$util.getSalaryOptions(3).then(items=>{
			    this.salaryOptions = items;
			  });
			  // this.$util.getWorkStates().then(items=>{
			  //   this.workStates = items;
			  // });
			  this.$util.getIndustryCategories().then(items=>{
			    this.industryCategories = items;
			  });
			  this.$util.getCities(false).then(items=>{
			  	this.cities = items;
			  })
			});
		},
		methods: {
			bindJobCategory(){
				uni.navigateTo({
					url: 'job_category?category_id='+this.model.fav_category_id || 0,
					events: {
						jobCategoryTransfer: data=>{
							this.model.fav_category_id = data.job.id
							this.model.fav_category = data.job;
							this.$forceUpdate()
						}
					}
				})
			},
			//薪资
			bindSalaryChange(e){
				let index = e.indexValues;
				this.model.expect_salary_id = this.salaryOptions[index[0]].id;
				this.$forceUpdate()
			},
			bindIndustryChange(e){
				let index = e.indexValues;
				this.model.industry_category_id = this.industryCategories[index[0]].id;
				this.$forceUpdate()
			},
			//性质
			bindTypeChange(e){
				let index = e.indexValues;
				this.model.job_type = this.types[index[0]].id;
				this.$forceUpdate()
			},
			//期望城市
			bindCityChange(event) {
				this.favAreaName = event.items.map(item=>item.name).join(',');
				this.model.fav_province_id = event.items[0].id;
				this.model.fav_city_id = event.items[1].id;
				this.$forceUpdate()
			  },
			bindSubmit(event) {
				let data = this.model;
				var rule = [
					{name: 'fav_category_id',rules: ['require','gt:0'],errorMsg: {require: '请选择职位',gt: '请选择职位'}},
					{name: 'expect_salary_id',rules: ['require','gt:0'],errorMsg: {require: '请选择薪资',gt: '请选择薪资'}},
					{name: 'fav_city_id',rules: ['require','gt:0'],errorMsg: {require: '请选择城市',gt:'请选择城市'}},
					{name: 'job_type',rules: ['require','gt:0'],errorMsg: {require: '请选择性质',gt:'请选择性质'}},
				];
				// 是否全部通过，返回Boolean
				if (!validate.check(data, rule)) {
				    uni.showToast({
				        title: validate.getError()[0],
				        icon: 'none'
				    });
				    return;
				}
			    data.module = 'job_intention';
			    this.$core.post({
			      url: 'xilujob.user/save_module', data: data,
			      success: ret => {
			        this.getOpenerEventChannel().emit('dataTransfer', {
			          model: ret.data.model,
			          complete_percent: ret.data.complete_percent
			        });
			        uni.navigateBack();
			      }
			    });
			},
			//删除
			bindDelModule() {
				let page = this;
				uni.showModal({
					title: '提示',
					content: '确认删除？',
					success: res => {
						if (res.confirm) {
							page.$core.post({
								url: 'xilujob.user/del_module',
								data: {
									module: 'job_intention',
									id: page.model.id
								},
								success: ret => {
									this.getOpenerEventChannel().emit('dataDelTransfer', {
										model: ret.data.model,
										complete_percent: ret.data.complete_percent
									});
									uni.navigateBack()
								}
							})
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 690rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);
		border-radius: 18rpx;
		padding: 40rpx 30rpx 30rpx;

		.label {
			display: inline-block;
			vertical-align: top;
			width: 190rpx;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			font-size: 27rpx;
			color: #666666;
			background: #F5F5F5;
			border-radius: 41rpx;
			padding: 0 8rpx;
			margin-top: 30rpx;
			margin-right: 30rpx;
			&:nth-of-type(3n){margin-right: 0;}
		}
	}

	.ico10 {
		width: 10rpx;
	}
	.box1{
		margin-top: 20rpx;
		width: 690rpx;	
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0,0,0,0.03);
		border-radius: 18rpx;
		padding: 10rpx 30rpx;
		.item{
			border-top: 1px solid #F4F4F4;
			height: 104rpx;
		}
	}
	.del{
		width: 220rpx;
		height: 82rpx;
		line-height: 82rpx;
		text-align: center;
		font-size: 30rpx;
		color: #999999;
		background: rgba(227, 229, 236, 0.5);
		border-radius: 8rpx;
		
	}
	.btn1.mini{
		height: 82rpx;
		line-height: 82rpx;
		width: 440rpx;
		border-radius: 8rpx;
	}
</style>